<template>
    <div class="editProfile-popup">
        <div class="editProfile-title">
            编辑用户资料 <button @click="cancel">关闭</button>
        </div>
        <div class="form-item">
            <label for="username">用户名</label>
            <div>
                <input id="username" type="text" readonly v-model="info.username">
            </div>
        </div>
        <!-- <div class="form-item">
            <label for="username">头像</label>
            <div>
                <input id="username" type="file">
            </div>
        </div> -->
        <div class="form-item">
            <label for="username">性别</label>
            <div>
                <label for="man">男</label><input name="sex" type="radio" v-model="info.sex" id="man" value="0">
                <label for="female">女</label><input name="sex" type="radio" v-model="info.sex" id="female" value="1">
                <label for="secrecy">保密</label><input name="sex" type="radio" v-model="info.sex" id="secrecy" value="2">
            </div>
        </div>
        <div class="form-item">
            <label for="username">生日</label>
            <div>
                <input id="username" type="text" v-model="info.birthday">
            </div>
        </div>
        <div class="form-item">
            <label for="username">手机号码</label>
            <div>
                <input id="username" type="text" v-model="info.phone">
            </div>
        </div>
        <div class="form-item">
            <label for="username">邮箱</label>
            <div>
                <input id="username" type="text" v-model="info.email">
            </div>
        </div>
        <div class="form-item">
            <label for="username">所在地</label>
            <div>
                <input id="username" type="text" v-model="info.location">
            </div>
        </div>
        <div class="form-item">
            <label for="username">个性说明</label>
            <div>
                <input id="username" type="text" v-model="info.intro" v-on:input="introChange">
            </div>
        </div>
        <div class="form-item">
            <label for="username">用户状态</label>
            <div>
                <input id="username" type="text" v-model="info.status">
            </div>
        </div>
        <div class="form-item">
            <label for="username">是否激活</label>
            <div>
                <input id="username" type="text" v-model="info.activated">
            </div>
        </div>
        <div class="form-btn">
            <button v-on:click="submit">提交</button>
            <button v-on:click="cancel">取消</button>
        </div>
    </div>
</template>

<script>
import Axios from "axios";
export default {
  name: "EditProfile",
  props: ["data", "defaultIndex", "hideEditFn"],
  components: {},
  data() {
    return {
      info: {}
    };
  },
  created() {
    this.info = Object.assign({}, this.data[this.defaultIndex]);
  },
  methods: {
    introChange(e) {
      this.$nextTick(() => {
        console.log(this.info.intro);
      });
    },
    submit() {
      var $query = `update user set 
                birthday='${this.info.birthday}',
                sex = ${this.info.sex},
                phone = '${this.info.phone}',
                email = '${this.info.email}',
                location = '${this.info.location}',
                intro = '${this.info.intro}',
                status = ${this.info.status},
                activated = ${this.info.activated} where id = ${
        this.info.userId
      };`;
      console.log($query);
      console.log(this.info);
      Axios({
        url: "/apis/userInfoEdit",
        method: "post",
        params: {
          ...this.info
        }
      }).then(response => {
        console.log(response);
      });
    },
    cancel() {
      this.hideEditFn();
    }
  }
};
</script>

<style lang="scss">
.c-popup {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 100;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  .editProfile-popup {
    width: 400px;
    height: auto;
    padding: 10px;
    background: #00bcd4;
    .editProfile-title {
      height: 30px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      line-height: 30px;
    }
    .form-item {
      height: 26px;
      padding: 5px 0;
      display: flex;
      > label {
        width: 80px;
        height: inherit;
        display: flex;
        align-items: center;
      }
      > div {
        flex: 1;
        height: inherit;
        > input[type="text"] {
          flex: 1;
          height: inherit;
        }
      }
    }
    .form-btn {
      height: 40px;
      line-height: 40px;
    }
  }
}
</style>

